<template>
  <div class="overview-bar-chart">
    <div id="overview-bar-chart-container">
    </div>
  </div>
</template>

<script>
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 引入柱状图图表，图表后缀都为 Chart
import {BarChart} from 'echarts/charts';
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  LegendComponent,
} from 'echarts/components';
// 标签自动布局，全局过渡动画等特性
import {LabelLayout, UniversalTransition} from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import {CanvasRenderer} from 'echarts/renderers';

// 注册必须的组件
echarts.use([
  BarChart,
  CanvasRenderer,
  DatasetComponent,
  GridComponent,
  LabelLayout,
  LegendComponent,
  TitleComponent,
  TooltipComponent,
  TransformComponent,
  UniversalTransition,
]);

export default {
  props: {
    enterCount: Number,
    reachCount: Number,
  },

  watch: {
    enterCount() {
      this.updateData()
    },

    reachCount() {
      this.updateData()
    }
  },

  mounted() {
    this.initChart()
    this.updateData()
    // console.log('overview barchart mounted')
  },

  methods: {
    initChart() {
      const that = this
      const overviewBarChart = echarts.init(document.getElementById('overview-bar-chart-container'))

      // 指定图表的配置项和数据
      const option = {
        tooltip: {
          show: true,
          formatter(params) {
            const tooltip = document.createElement('div')
            console.log('that formatter', that)
            if (params.name === '累计进入') {
              tooltip.innerText = '累计进入'
            } else {
              if (that.reachCount && that.enterCount) {
                tooltip.innerText = '累计触达：' + (that.reachCount / that.enterCount * 100).toFixed(2) + '%'
              } else {
                tooltip.innerText = '累计触达：--'
              }
            }
            return tooltip
          }
        },
        grid: {
          top: 30,
          left: 50,
          right: 50,
          bottom: 50
        },
        label: {
          show: true,
          position: "top",
          formatter(params) {
            return params.value + '人'
          },
        },
        xAxis: {
          data: ['累计进入', '累计触达']
        },
        yAxis: {},
      };

      overviewBarChart.setOption(option)
      this.overviewBarChart = overviewBarChart
    },

    updateData() {
      this.overviewBarChart.setOption({
        series: [
          {
            type: 'bar',
            data: [
              {
                value: this.enterCount,
              },
              {
                value: this.reachCount,
                itemStyle: {
                  color: 'rgba(90, 216, 166, 0.85)'
                }
              }
            ],
          },
        ],
      })
    }
  }
}
</script>

<style scoped lang="scss">
.overview-bar-chart {
  height: 100%;
  box-sizing: border-box;
}

#overview-bar-chart-container {
  height: 300px;
}
</style>
